<template>
	<div class="container" id="SchoolMap">
		<div id="myMap" ref="myMap" v-show="chartShow" class="container" style="width: 500px;height: 500px;"></div>
		<div v-show="listShow">
			<el-button style="margin-top: 30px;width: 100%;margin-bottom: 10px;" type="success" round @click="chartShow=true,listShow=false">返回地图视口</el-button>
			<el-scrollbar max-height="400px">
				 <div style="background-color:#b5eee8 ;margin: 10px;" class="item" v-for="item in prvschoolList">
					 <el-link style="font-size:x-large;margin-left: 40%;" center @click="goToLink(item)">{{ item }}</el-link>
				 </div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
	import {defineComponent,ref,getCurrentInstance,onMounted,} from "vue";
	import axios from 'axios'
	import qs from 'qs'
	import debounce from 'debounce'

	export default{
		data(){
			return{
				name:["ahah","afdh"]
			}
		},
		methods:{
			goToLink(param){
				var len = this.prvschoolList.length;
				var link;
				for(var i = 0;i < len;i++){
					if(param==this.prvschoolList[i]){
						link = this.prvschoolListLink[i];
						break;
					}
				}
				window.open(link,"_blank");
			}
		},
		setup(){
			let schoolList;
			let prvschoolList = ref(null);
			let prvschoolListLink=ref(null);
			let { proxy } = getCurrentInstance();
			let chartShow = ref(true);
			let listShow = ref(false);
			const chart = ref(null);
			const mapOption = ref({
			  background:"../assets/background_img.jpg",
			  geo: {
				map: "china",
				roam: false,
				zoom: 1.2,
				//scaleLimit: { min: 0, max: 3 }, // 缩放级别
				itemStyle: {
					normal:{
					  background:"../assets/background_img.jpg",
					  areaColor: "#c6f9d7", //默认的地图板块颜色
					  borderWidth: 1,
					  borderColor: "#009ce0",
				  },
				  emphasis:{
					  background:"../assets/background_img.jpg",
					  areaColor: "#2ee2dc", //默认的地图板块颜色
					  borderWidth: 1,
					  borderColor: "#009ce0",
				  }
				},
			  },
			  title: {
				text: "大学数据地图",
				x: "center",
				y: 20,
			  },
			  tooltip: {
				trigger: "item",
				formatter:function(params){
					if(params.name!=null){
						var prv = nameProcess(params.name);
						console.log(prv);
						var prvData =getPrvData(prv);
						return getLabel(prvData);

					}
				}
			  },

			  //配置属性
			  series: [
				{
				  name: "数据",
				  type: "map",
				  mapType: "china",
				  roam: true,
				  geoIndex: 0,
				  label: {
					normal: {
					  show: false, //省份名称,
					},
					emphasis: {
					  show: true,
					},
				  },
				},
			  ],
			});
			const getSchoolList=(param)=>{
				var len = param.length;
				var rs;
				var info =[];
				var info1 = [];
				for(var i = 0;i < len;i++){
					info.push(param[i].schoolName);
					info1.push(param[i].officialWeb);
				}
				prvschoolListLink.value = info1;
				return info;
			}
			const getLabel=(param)=>{
				if(param!=''&&param!=null){
						console.log(param)
						var info;
						var dotHtml = '<td><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1DB250"></span></td>'
						info = '<table>';
						info += "<tr>"+param.province+"  大学列表"+'</tr>'
						var len = param.schools.length;
						prvschoolList.value = getSchoolList(param.schools);
						if(len>10) len = 10;
						for(var i = 0;i < len;i++)
						{
							info += '<tr>';
							info += dotHtml+'<td>'+param.schools[i].schoolName+'</td>';
							info += '</tr>';
						}
						if(len>10){
							info += '<tr>...</tr>'
						}
						info+='</table>';

						return info;
					}
				else{
						var info;
						info = '<table><tr>暂无数据</tr></table>';

				}
			}
			const nameProcess=(param)=>{
				var value = param;
				if(param.indexOf("内蒙古")!=-1){
					return "内蒙古";
				}
				if(param.indexOf("宁夏")!=-1){
					return "宁夏";
				}
				if(param.indexOf("新疆")!=-1){
					return "新疆";
				}
				if(param.indexOf("西藏")!=-1){
					return "西藏";
				}
				if(param.indexOf("宁夏")!=-1){
					return "宁夏";
				}
				if(param.indexOf("广西")!=-1){
					return "广西";
				}
				param = param.replace("省",'');
				param = param.replace("市",'');

				return param;
			}
			const getPrvData = (param) =>{
				var len = schoolList.length;
				for(var i = 0;i < len;i++){
					if(schoolList[i].province==param){
						return schoolList[i];
					}
				}
			}
			const getAllData=()=>{
				axios
				.post("http://49.232.135.8:8088/back/school/findByProvince")
				.then(rst=>{
					console.log(rst);
					schoolList = rst.data;
				}).catch(ex=>{
					console.log(ex);
				});
			}
			onMounted(() => {
			  window.addEventListener('resize',function(){
				  chart.value.resize();
			  });
			  getAllData();
			  console.log(proxy, chart.value, mapOption.value);
			  chart.value = proxy.$echarts.init(
				document.getElementById("myMap"),
				"macarons"
			  );
			  chart.value.setOption(mapOption.value);
			  chart.value.on("click", function(params) {
				   listShow.value = true;
				  chartShow.value = false;
				console.info(params);
			  });
			  window.onresize = function(){

				  chart.value.resize();

			  }

			});
			return{
				chartShow,
				prvschoolList,
				listShow,
				prvschoolListLink
			}
		},
	}

</script>

<style scoped>
</style>
